<template>
	<view class="main">
		<view class="header">
			<view class="search">
				<image src="@/static/img/searchIcon.png" mode=""></image>
				<input v-model="data.keyword" type="text" placeholder="请搜索你需要的商品" />
				<view class="btn" @tap="getList">搜索</view>
			</view>
		</view>
		<view class="message">
			<view class="in">
				<image class="icon" src="@/static/img/messIcon.png" mode=""></image>
				<view class="msg">
					<text v-if="text.length == 0">暂无公告</text>
					<u-notice-bar v-else :text="text" direction="column"></u-notice-bar>
				</view>
				<image class="right" src="@/static/img/right.png" mode=""></image>
			</view>
		</view>
		<view class="con">
			<u-tabs :list="list1" @click="click"></u-tabs>
			<!-- <view class="search">
				<image src="@/static/img/searchIcon.png" mode=""></image>
				<input v-model="data.keyword" type="text" placeholder="请搜索你需要的商品" />
				<view class="btn" @tap="getList">搜索</view>
			</view> -->
			<u-empty v-if="goodsList.length == 0 && isShow" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			<ul class="list" v-if="isShow">
				<li v-for="(item, index) in goodsList" :key="index" @tap="routerTo(`/pages/pageB/detail/detail?type=1&id=${item.id}`)">
					<image :src="item.image" alt="" />
					<view class="txt">
						<p class="h3">{{ item.name }}</p>
						<p class="msg">{{ item.intro }}</p>
						<p class="price">￥{{ item.member_price }}</p>
					</view>
				</li>
			</ul>
		</view>
		<u-modal :show="show && daka" confirmText="去打卡" @confirm="routerTo('/pages/pageB/data/clockIn')" :closeOnClickOverlay="true" @close="show = false">
			<view class="slot-content">
				<view class="modalCon">
					<image class="close" src="@/static/img/close.png" mode="" @tap="show = false"></image>
					<image class="bg" src="@/static/img/clockBg.png" mode=""></image>
					<view class="time">
						{{ nowClock }}
					</view>
					<view class="msg">你还未打卡</view>
				</view>
			</view>
		</u-modal>
		<innerTabbar seleTabbar="0"></innerTabbar>
	</view>
</template>

<script>
import { getDynamics, signTimes, isSign, innerinfo } from '@/api/inner.js';
import { getCates, indexList,getConfigs } from '@/api/user.js';
import innerTabbar from '../../components/innerTabbar.vue';
export default {
	components: {
		innerTabbar
	},
	data() {
		return {
			show: false,
			text: [],
			nowClock: '',
			isClock: -1,
			list1: [],
			goodsList: [],
			isShow: false,
			userInfo: {},
			lastPage: 1,
			data: {
				page_size: 10,
				category_id: '2',
				page: 1,
				keyword: ''
			},
			daka:true,
			watermark:''
		};
	},
	onLoad() {
		this.indexInfo();
		this.watermark = uni.getStorageSync('watermark')
		this.classInfo();
		this.getInfo();
	},
	onShow(){
		// this.clockTime();
		// isSign().then((res) => {
		// 	this.isClock = res.data.status;
		// });
	},
	onReachBottom() {
		if (this.data.page == this.lastPage) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			});
		} else {
			this.data.page++;
			this.getList();
		}
	},
	methods: {
		click(e) {
			this.data.page = 1
			this.data.category_id = e.id;
			this.page = 1;
			this.getList();
		},
		classInfo() {
			getCates().then((res) => {
				this.data.category_id = res.data[0].id;
				res.data.forEach((item) => {
					this.list1.push({
						name: item.title,
						id: item.id
					});
				});
				this.getList();
			});
		},
		async getList() {
			// this.isShow = false;
			if (this.data.page == 1) {
				this.goodsList = [];
			}
			let res = await indexList(this.data);
			this.lastPage = res.data.last_page;
			res.data.data.forEach((item) => {
				this.goodsList.push(item);
			});
			this.isShow = true;
		},
		async indexInfo() {
			let res = await getDynamics();
			res.data.forEach((item) => {
				this.text.push(item.content);
			});
		},
		async clockTime() {
			let res = await signTimes();
			let timeArr = res.data;
			let date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			let arr = [];
			timeArr.forEach((item, index) => {
				let time1 = `${y}-${m}-${d} ${item[0]}`;
				let time2 = `${y}-${m}-${d} ${item[1]}`;
				let a1 = new Date(time1).getTime();
				let a2 = new Date(time2).getTime();
				arr.push([a1, a2]);
			});
			let now = new Date().getTime();
			let nowTime = new Date();
			let hh = nowTime.getHours();
			let mm = nowTime.getMinutes();
			mm = mm < 10 ? '0' + mm :mm
			this.nowClock = `${hh}:${mm}`;
			arr.forEach((item, index) => {
				if (now > item[0] && now < item[1]) {
					if (this.isClock == 0) {
						this.show = true;
						return;
					}
				}
			});
		},
		async getInfo() {
			let res = await innerinfo();
			this.userInfo = res.data;
		},
		routerTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: calc(100vh - 50px);
	background-image: url('@/static/img/innerindexBg.png');
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100% 235px;
	/deep/.u-notice-bar {
		padding: 0;
		background-color: #fff !important;
	}
	/deep/.u-notice__left-icon {
		display: none;
	}
	/deep/.u-notice__swiper__item__text {
		color: #3d3d3d !important;
	}
	.slot-content {
		.modalCon {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			.time {
				color: #0a84ff;
				font-size: 50px;
				margin-bottom: 10px;
			}
			.msg {
				color: #4c83d2;
			}
			.close {
				width: 35px;
				height: 35px;
				position: absolute;
				top: -10px;
				right: -55px;
			}
			.bg {
				width: 207px;
				height: 117px;
			}
		}
	}
	.header{
			padding: 60px 15px 0;
		.search {
			width: 100%;
			border-radius: 10px;
			background-color: #f2f3f7;
			display: flex;
			align-items: center;
			padding: 10px 12px;
			margin-bottom: 15px;
			position: relative;
			image {
				width: 12px;
				height: 12px;
				margin-right: 7px;
			}
			input {
				flex: 1;
			}
			.btn {
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
				font-size: 13px;
				background-color: #0a84ff;
				color: #fff;
				padding: 5px 8px;
				border-radius: 5px;
				display: flex;
				align-items: center;
			}
		}
	}
	// .header {
	// 	padding: 60px 15px 0;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	margin-bottom: 20px;
	// 	.left {
	// 		display: flex;
	// 		align-items: center;
	// 		.img {
	// 			border: 2px solid #fff;
	// 			border-radius: 5px;
	// 			margin-right: 10px;
	// 			image {
	// 				width: 34px;
	// 				height: 34px;
	// 				border-radius: 5px;
	// 			}
	// 		}
	// 		.msg {
	// 			font-size: 14px;
	// 			color: #fff;
	// 		}
	// 	}
	// 	.btn {
	// 		padding: 5px 15px;
	// 		font-size: 12px;
	// 		color: #fff;
	// 		border: 1px solid #ffffff;
	// 		background-color: #78b0fa;
	// 		border-radius: 100px;
	// 	}
	// }
	.message {
		width: 100%;
		padding: 15px;
		.in {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			align-items: center;
			padding: 10px 15px;
			border-radius: 10px;
			.icon {
				width: 16px;
				height: 16px;
			}
			.msg {
				flex: 1;
				margin: 0 20px 0 10px;
				font-size: 14px;
				color: #3d3d3d;
			}
			.right {
				width: 20px;
				height: 20px;
			}
		}
	}
	.con {
		padding: 0 15px 20px;
		background: linear-gradient(180deg, #dcedff 0%, #ffffff 100%);
		border-radius: 20px 20px 0px 0px;
		/deep/.u-tabs__wrapper__nav__item__text {
			font-size: 16px;
			color: #232323;
		}
		/deep/.u-tabs__wrapper__nav__line {
			background-color: #232323 !important;
		}
		/deep/.u-tabs {
			margin-bottom: 15px;
		}
		.search {
			width: 100%;
			border-radius: 10px;
			background-color: #f2f3f7;
			display: flex;
			align-items: center;
			padding: 10px 12px;
			margin-bottom: 15px;
			position: relative;
			image {
				width: 12px;
				height: 12px;
				margin-right: 7px;
			}
			input {
				flex: 1;
			}
			.btn {
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
				font-size: 13px;
				background-color: #0a84ff;
				color: #fff;
				padding: 5px 8px;
				border-radius: 5px;
				display: flex;
				align-items: center;
			}
		}
		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-bottom: 60px;
			li {
				width: 45%;
				background-color: #fff;
				margin-bottom: 10px;
				border: 1px solid #f2f3f7;
				image {
					border-radius: 5px 5px 0 0;
					width: 100%;
					height: 105px;
					margin-bottom: 10px;
				}
				.txt {
					border-radius: 5px;
					padding: 0 7px 15px;
					.h3 {
						width: 100%;
						font-size: 13px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 8px;
						font-weight: 700;
					}
					.msg {
						font-size: 11px;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 10px;
						color: #666666;
					}
					.price {
						color: #eb4a4a;
						font-weight: 700;
					}
				}
			}
		}
	}
}
</style>
